<template>
  <div>
    <div style="display:flex; justify-content:space-between;align-items:center">
      <div style="line-height:15px;padding-top:21px; padding-bottom:20px ; font-weight:600;">课程列表</div>
      <el-button style="font-weight:600;" @click="addData">新增</el-button>
    </div>

    <div id="lists">
      <div class="listDiv" v-for="(item, index) in Table" :key="item.id">
        <div class="id">
          <span>D:{{item.id}}</span>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox :label="Table[index].id"></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="img">
          <img :src="imgArr[index]" />
        </div>

        <div class="text">
          <h5>{{item.classname}}</h5>
          <p>报名费： {{item.price}}</p>
          <p>销量： {{item.sale}}</p>
          <p>上传人： {{item.upload}}</p>
          <p>上传时间： {{item.uploadDate}}</p>
        </div>

        <div class="btn">
          <el-button type="primary" icon="el-icon-edit" @click="edit(item.id)">编辑</el-button>

          <el-button type="info" icon="el-icon-delete" @click="deletefun(index)">删除</el-button>
        </div>
      </div>
    </div>



    <div class="allCheck">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >全选</el-checkbox>

      <el-button type="text" style="color:#000;margin-left:10px" @click="alldelete">批量删除</el-button>
    </div>

    <!-- 编辑修改数据 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="报名费">
          <el-input v-model="form.price"></el-input>
        </el-form-item>

        <el-form-item label="销量">
          <el-input v-model="form.sale"></el-input>
        </el-form-item>

        <el-form-item label="上传人">
          <el-input v-model="form.upload"></el-input>
        </el-form-item>

        <el-form-item label="上传时间">
          <div class="block">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.uploadDate"
              style="width: 100%;"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCourseApi } from "../../api/CourseApi";
import { deleteCourseApi } from "../../api/CourseApi";
import { deleteAll } from "../../api/CourseApi";
import { editApi } from "../../api/CourseApi";

import one from "../../assets/img/classlist/1.png";
import two from "../../assets/img/classlist/2.png";
import three from "../../assets/img/classlist/3.png";
import four from "../../assets/img/classlist/4.png";
import five from "../../assets/img/classlist/5.png";
import six from "../../assets/img/classlist/6.png";
import seven from "../../assets/img/classlist/7.png";
import eight from "../../assets/img/classlist/8.png";

import Bus from "../../utils/Bus";

export default {
  data() {
    return {
      resetTable: [],
      // checkboxGroup: [],
      Table: [],
      imgArr: [one, two, three, four, five, six, seven, eight],
      checkedCities: [],
      isIndeterminate: true,
      checkAll: false,
      total: 0,
      seaId: "",

      //编辑对话框
      dialogVisible: false,

      form: {
        id: '',
        classname:'',
        price: '',
        sale: '',
        upload: "",
        uploadDate: ""
      }
    };
  },
  mounted() {
    Bus.$on("search", this.getClass);
    this.getClass();
    this.totalfun();
  },
  beforeDestroy() {
    Bus.$off("search", this.getClass);
  },
  methods: {
    totalfun() {
      Bus.$emit("total", this.total);
    },

    getClass(val) {
      console.log(val);
      getCourseApi({
        id: Number(val)
      }).then(res => {
        console.log(res);
        this.Table = res.data;
        console.log(this.Table);

        this.total = res.total;
        console.log(this.total);
      });
    },

    handleCheckAllChange(val) {
      let arr = [];
      this.Table.forEach(item => {
        arr.push(item.id);
      });
      this.checkedCities = val ? arr : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.Table.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.Table.length;
    },
    alldelete() {
      console.log(this.checkedCities);
      let ids = "";
      for (let i = 0; i < this.checkedCities.length; i++) {
        ids = ids + this.checkedCities[i];
        ids += ",";
      }
      console.log(ids);
      deleteAll({
        ids: ids
      }).then(res => {
        console.log(res);
      });

      this.$parent.getclass();
    },
    deletefun(index) {
      deleteCourseApi({
        id: Number(this.Table[index].id)
      }).then(res => {
        console.log(res);
      });
      this.imgArr.splice(index, 1)

      this.$parent.getclass();
    },

    //编辑
    edit(val) {
      this.dialogVisible = true;

      for (let i = 0; i < this.Table.length; i++) {
        if (this.Table[i].id === val) {
          this.form.id = this.Table[i].id;
          this.form.price = this.Table[i].price;
          this.form.sale = this.Table[i].sale;
          this.form.upload = this.Table[i].upload;
          this.form.uploadDate = this.Table[i].uploadDate;
        }
      }
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },

    onSubmit() {
      console.log("submit!");

      this.dialogVisible = false;

      editApi({
        id: Number(this.form.id) ,
        price: Number(this.form.price) ,
        sale: Number(this.form.sale) ,
        upload: this.form.upload,
        uploadDate: this.form.uploadDate
      }).then(res => {
        console.log(res);
      });

      this.$parent.getclass();
    },
    addData() {
      this.dialogVisible = true;





    }
  }
};
</script>

<style lang="less" scoped>
#lists {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
#lists .listDiv {
  width: 22%;
  margin: 10px 10px;
  padding-left: 5px;
  padding-right: 8px;
  background: #fff;
}
#lists .id {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 28px;
  font-size: 12px;
  font-weight: 600;

}

#lists .img img {
  height: 128px;
  width: 240px;
  text-align: center;
}
#lists .text {
  margin-top: 10px;
}
#lists .text > h5 {
  font-family: "微软雅黑";
  color: #333333;
  font-weight: 600;
  font-size: 14px;
  word-spacing: 100;
  margin-bottom: 10px;
}
#lists .text p {
  font-size: 12px;
  line-height: 22px;
}
#lists .btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 44px;
}
#lists .btn button {
  width: 68px;
  height: 24px;
  padding-left: 8px;
}

</style>